<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>x-admin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/xadmin/lib/layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <!--主体内容 start-->
        <div class="layui-row">

            <div class="layui-col-md3">
                <input type="text" id="ser_row" name="ser_row" required  lay-verify="required" placeholder="名称" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-col-md1">
                <button style="margin-left: 50px;" class="layui-btn" onclick="ser_on()">搜索</button>
            </div>
            <div class="layui-col-md1">
                <button style="margin-left: 50px;" class="layui-btn layui-btn-danger"  onclick="set_all_del()">批量删除</button>
            </div>
            <div class="layui-col-md1">
                <button style="margin-left: 50px;" class="layui-btn layui-btn-warm" onclick="export_excel()">导出</button>
            </div>
            <div class="layui-col-md1">
                <button style="margin-left: 50px;" class="layui-btn layui-btn-normal"  onclick="import_excel()">导入</button>
            </div>

            <div class="layui-col-md4">
                <button style="float: right;"  class="layui-btn" onclick="ser_add()">添加</button>
            </div>
        </div>
        <table id="demo" lay-filter="test">

        </table>


        <!--主体内容 end-->
    </div>
</div>


<div class="layui-form" id="layui_form" style="display: none">
    <table class="layui-table">
        <tr>
            <td colspan="2">
                <p>说明1：这里下载模板是导出所有会员的信息的，删除你不要的信息，当然也可以自定义模板，再选择上传文件</p>
                <p>说明2：上传文件时，请保留你的表格中表头的信息</p>
                <p>说明3：表格中如果会员已经存在该系统，则不继续添加</p>
            </td>

        </tr>
        <tr>
            <td>
                <label class="layui-form-label">下载模板</label>
            </td>
            <td >
                <div class="layui-input-block">
                    <button  class="layui-btn layui-btn-warm" onclick="export_excel()">下载模板</button>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <label class="layui-form-label">批量导入</label>
            </td>
            <td >
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件(自动提交)</button>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>


<!--成功提示信息-->
<div class="layui-row" style="margin-top:30px;display: none"  id="lay_msg1">
    <div style="margin-left: 30%;margin-top:30px;">
        <h2>本次共添加&nbsp;&nbsp;&nbsp;<span style="color: #0AA5DF" id="zg_count1">0</span>&nbsp;&nbsp;&nbsp;个
            ，其中&nbsp;&nbsp;&nbsp;<span style="color: #0AA5DF" id="k_count1">0</span>&nbsp;&nbsp;&nbsp;个资料可添加，
            &nbsp;&nbsp;&nbsp;<span style="color: red"><span  id="b_count1">0</span>&nbsp;&nbsp;&nbsp;个资料不可添加</span>
        </h2>
    </div>
    <div style="margin-left: 30%;margin-top:30px;">
        <p>备注说明：不可添加原因是：</p>
        <p>1：表格会员名称不存在；</p>
        <p>1：或者其他的原因，请检查；</p>
    </div>
    <div style="margin-left: 35%;margin-top:30px;">
        <a class="layui-btn layui-btn-normal" href="{:url('admin/user/index')}" >返回</a>
        <button class="layui-btn" onclick="x_submit1()" style="margin-left: 220px;"> 下一步</button>
    </div>
</div>
<script src="/static/xadmin/lib/layui/jquery-3.2.1.min.js"></script>
<script src="/static/xadmin/lib/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/xadmin/' //静态资源所在路径
    });
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
    });
    var TABLE='';
    layui.use('table', function(){
        var table = layui.table;
        TABLE=table;
        var urls = '{:url("admin/user/index")}';
        //第一个实例
        TB = table.render({
            elem: '#demo'
            ,height: 'full-100'
            ,limits:[100,500]
            ,limit:100
            ,url: urls //数据接口
            ,page: true //开启分页
            ,toolbar: true//开启筛选图标 导出图标   打印图标
            ,cols: [[ //表头
                { type: 'checkbox',width:100}
                ,{field: 'id', title: 'ID',  sort: true}
                ,{field: 'user_name', title: '会员名称',  sort: true}
                ,{field: 'email', title: '会员邮箱',  sort: true,}
                ,{field: 'phone', title: '会员联系',  sort: true,}
                ,{field: 'age', title: '年龄',  sort: true,}
                ,{field: 'user_logo', title: '会员头像',  sort: true,templet:function (d) {
                    return '<div style="height:50px;width:50px;overflow:hidden;cursor:pointer;" onclick="show_img(this)"><img  style="height:100%;width:100%;" src="'+d.user_logo+'" /></div>';
                }}
                ,{field: 'last_ip', title: '登录IP',  sort: true,}
                ,{field: 'last_time', title: '登录时间',  sort: true,templet:function (d) {
                    return '<span>'+timestampToTime(d.last_time)+'</span>';
                }}
                ,{field: 'add_time', title: '注册时间',  sort: true,templet:function (d) {
                    return '<span>'+timestampToTime(d.add_time)+'</span>';
                }}
                ,{field: 'status', title: '状态', sort: true,templet: function(d) {
                    if(d.status == 1) {
                        return '启用';
                    } else if(d.status == 2) {
                        return '禁用';
                    }else {
                        return '无'
                    }
                }}
                ,{field: 'user_system', title: '用户登录的系统',  sort: true,}
                ,{field: '#', title: '操作',toolbar: '#barDemo'}
            ]]
        });
    });
    //搜索
    function ser_on(){
        var ser_row = $("#ser_row").val();
        var urls = '{:url("admin/user/index")}'+'?keyword='+ser_row;
        TB.reload({
            url: urls
            ,cols: [[ //表头
                { type: 'checkbox',width:100}
                ,{field: 'id', title: 'ID',  sort: true}
                ,{field: 'user_name', title: '会员名称',  sort: true}
                ,{field: 'email', title: '会员邮箱',  sort: true,}
                ,{field: 'phone', title: '会员联系',  sort: true,}
                ,{field: 'age', title: '年龄',  sort: true,}
                ,{field: 'user_logo', title: '会员头像',  sort: true,templet:function (d) {
                    return '<div style="height:50px;width:50px;overflow:hidden;cursor:pointer;" onclick="show_img(this)"><img  style="height:100%;width:100%;" src="'+d.user_logo+'" /></div>';
                }}
                ,{field: 'last_ip', title: '登录IP',  sort: true,}
                ,{field: 'last_time', title: '登录时间',  sort: true,templet:function (d) {
                    return '<span>'+timestampToTime(d.last_time)+'</span>';
                }}
                ,{field: 'add_time', title: '注册时间',  sort: true,templet:function (d) {
                    return '<span>'+timestampToTime(d.add_time)+'</span>';
                }}
                ,{field: 'status', title: '状态', sort: true,templet: function(d) {
                    if(d.status == 1) {
                        return '启用';
                    } else if(d.status == 2) {
                        return '禁用';
                    }else {
                        return '无'
                    }
                }}
                ,{field: 'user_system', title: '用户登录的系统',  sort: true,}
                ,{field: '#', title: '操作',toolbar: '#barDemo'}
            ]]
        });
    }

    /*
    添加
     */
    function ser_add() {
        var url='{:url("admin/user/add")}';
        layer.open({
            type: 2,
            title: '信息',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url, //iframe的url
        });
    }
    /*
    编辑
     */
    function set_edit(t) {
        var id=$(t).attr("id-data");
        var url='{:url("admin/user/edit")}'+'?id='+id;
        layer.open({
            type: 2,
            title: '信息',
            shadeClose: true,
            shade: 0.8,
            area: ['80%', '80%'],
            content: url, //iframe的url
        });
    }

    /*
    删除
     */
    function set_del(t) {
        var id=$(t).attr("id-data");
        layer.confirm('你确定要删除么？', {
            btn: ['确定', '取消'] //可以无限个按钮
        }, function(index, layero){
            //按钮【按钮一】的回调
            $.post('{:url("admin/user/del")}',{'id':id},function(data){
                if(data.code==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function () {
                        location.reload();
                    },1500);

                }else{
                    layer.alert(data.msg,{icon:2});
                }
            });

        }, function(index){
            //按钮【按钮二】的回调
        });
        
    }

    /*
    批量删除
    */
    function set_all_del() {
        var checkStatus=TABLE.checkStatus("demo");  //        <table id="demo" lay-filter="test"></table>
        var list=checkStatus.data;
        var ids=[];
        for(var i=0;i<list.length;i++){
            ids.push(list[i]["id"]);
        }
        if(ids==""){
            layer.msg("请勾选要删除",{iocn:2});
            return 0;
        }
        layer.confirm('你确定要删除么？', {
            btn: ['确定', '取消'] //可以无限个按钮
        }, function(index, layero){
            //按钮【按钮一】的回调
            $.post('{:url("admin/user/del")}',{'ids':ids},function(data){
                if(data.code==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function () {
                        location.reload();
                    },1500);

                }else{
                    layer.alert(data.msg,{icon:2});
                }
            });

        }, function(index){
            //按钮【按钮二】的回调
        });
    }


    //图片显示
    function show_img(t) {
        var t = $(t).find("img");
        //页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['75%', '75%'], //宽高
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                $('body,html,iframe').css({
                    "overflow-x": "auto",
                    "overflow-y": "auto"
                });
                return false;
            },
            content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
        });
        $('body,html,iframe').css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });
    }
    /*
    将时间戳转为日期格式
     */
    function timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y+M+D+h+m+s;
    }
    //导出
    function export_excel() {
        var ser_row = $("#ser_row").val();
        var url='{:url("admin/user/export_excel")}'+'?keyword='+ser_row;
        location.href=url;
    }
    /*
    导入
     */
    function import_excel() {
        layer.open({
            type: 1,
            title: '信息',
            shadeClose: true,
            shade: 0.8,
            area: ['50%', '40%'],
            content: $("#layui_form"), //iframe的url
        });


        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;
            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test3'
                ,url: "{:url('admin/user/import_excel',['type'=>'1'])}"
                ,accept:'file'  // 允许上传的文件类型
                ,done: function(data){
                    var index = layer.load(1, {
                        shade: [0.1,'#fff'] //0.1透明度的白色背景
                    });
                    if(data.code==1){
                        var success_list=data.data;
                        var success_len='';
                        if(success_list==''){
                            success_len=0;
                        }else{
                            success_len=success_list.length;
                        }
                        var error_list=data.data_error;
                        var error_len=''
                        if(error_list==''){
                            error_len=0;
                        }else{
                            error_len=error_list.length;
                        }
                        var zg_count=parseInt(success_len)+parseInt(error_len);
                        $("#zg_count1").text(zg_count);
                        $("#k_count1").text(success_len);
                        $("#b_count1").text(error_len);

                        layer.open({
                            type: 1,
                            title: "提示信息",
                            skin: 'layui-layer-demo', //样式类名
                            closeBtn: 1, //不显示关闭按钮
                            anim: 2,
                            area: ['80%', '70%'],
                            content: $("#lay_msg1")
                        });
                        layer.close(index);
                    }else {
                        layer.close(index);
                        return layer.msg(data.msg);
                    }
                    //上传成功
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    return layer.msg('上传失败');
                }
            });
        });

    }
    
    /*
    提交成功的
     */
    function x_submit1() {
        layer.confirm('你确定要添加成功的么？', {
            btn: ['确定', '取消'] //可以无限个按钮
        }, function(index, layero){
            //按钮【按钮一】的回调
            $.post('{:url("admin/user/import_excel")}',{'type':2},function(data){
                if(data.code==1){
                    layer.msg(data.msg,{icon:1});
                    setTimeout(function () {
                        location.reload();
                    },1500);

                }else{
                    layer.alert(data.msg,{icon:2});
                }
            });

        }, function(index){
            //按钮【按钮二】的回调
        });




    }



</script>
</body>
</html>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail"  id-data="{{d.id}}" onclick="set_edit(this)">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs "  id-data="{{d.id}}" onclick="set_del(this)">删除</a>
</script>
